/*!
 * wordcloud2.js
 * http://timdream.org/wordcloud2.js/
 *
 * Copyright 2011 - 2019 Tim Guan-tin Chien and contributors.
 * Released under the MIT license
 */

'use strict'

// setImmediate
if (!window.setImmediate) {
    window.setImmediate = (function setupSetImmediate () {
        return window.msSetImmediate ||
            window.webkitSetImmediate ||
            window.mozSetImmediate ||
            window.oSetImmediate ||
            (function setupSetZeroTimeout () {
                if (!window.postMessage || !window.addEventListener) {
                    return null
                }

                var callbacks = [undefined]
                var message = 'zero-timeout-message'

                // Like setTimeout, but only takes a function argument.  There's
                // no time argument (always zero) and no arguments (you have to
                // use a closure).
                var setZeroTimeout = function setZeroTimeout (callback) {
                    var id = callbacks.length
                    callbacks.push(callback)
                    window.postMessage(message + id.toString(36), '*')

                    return id
                }

                window.addEventListener('message', function setZeroTimeoutMessage (evt) {
                    // Skipping checking event source, retarded IE confused this window
                    // object with another in the presence of iframe
                    if (typeof evt.data !== 'string' ||
                        evt.data.substr(0, message.length) !== message/* ||
            evt.source !== window */) {
                        return
                    }

                    evt.stopImmediatePropagation()

                    var id = parseInt(evt.data.substr(message.length), 36)
                    if (!callbacks[id]) {
                        return
                    }

                    callbacks[id]()
                    callbacks[id] = undefined
                }, true)

                /* specify clearImmediate() here since we need the scope */
                window.clearImmediate = function clearZeroTimeout (id) {
                    if (!callbacks[id]) {
                        return
                    }

                    callbacks[id] = undefined
                }

                return setZeroTimeout
            })() ||
            // fallback
            function setImmediateFallback (fn) {
                window.setTimeout(fn, 0)
            }
    })()
}

if (!window.clearImmediate) {
    window.clearImmediate = (function setupClearImmediate () {
        return window.msClearImmediate ||
            window.webkitClearImmediate ||
            window.mozClearImmediate ||
            window.oClearImmediate ||
            // "clearZeroTimeout" is implement on the previous block ||
            // fallback
            function clearImmediateFallback (timer) {
                window.clearTimeout(timer)
            }
    })()
}

(function (global) {
    // Check if WordCloud can run on this browser
    var isSupported = (function isSupported () {
        var canvas = document.createElement('canvas')
        if (!canvas || !canvas.getContext) {
            return false
        }

        var ctx = canvas.getContext('2d')
        if (!ctx) {
            return false
        }
        if (!ctx.getImageData) {
            return false
        }
        if (!ctx.fillText) {
            return false
        }

        if (!Array.prototype.some) {
            return false
        }
        if (!Array.prototype.push) {
            return false
        }

        return true
    }())

    // Find out if the browser impose minium font size by
    // drawing small texts on a canvas and measure it's width.
    var minFontSize = (function getMinFontSize () {
        if (!isSupported) {
            return
        }

        var ctx = document.createElement('canvas').getContext('2d')

        // start from 20
        var size = 20

        // two sizes to measure
        var hanWidth, mWidth

        while (size) {
            ctx.font = size.toString(10) + 'px sans-serif'
            if ((ctx.measureText('\uFF37').width === hanWidth) &&
                (ctx.measureText('m').width) === mWidth) {
                return (size + 1)
            }

            hanWidth = ctx.measureText('\uFF37').width
            mWidth = ctx.measureText('m').width

            size--
        }

        return 0
    })()

    var getItemExtraData = function (item) {
        if (Array.isArray(item)) {
            var itemCopy = item.slice()
            // remove data we already have (word and weight)
            itemCopy.splice(0, 2)
            return itemCopy
        } else {
            return []
        }
    }

    // Based on http://jsfromhell.com/array/shuffle
    var shuffleArray = function shuffleArray (arr) {
        for (var j, x, i = arr.length; i;) {
            j = Math.floor(Math.random() * i)
            x = arr[--i]
            arr[i] = arr[j]
            arr[j] = x
        }
        return arr
    }

    var timer = {};
    var WordCloud = function WordCloud (elements, options) {
        if (!isSupported) {
            return
        }

        var timerId = Math.floor(Math.random() * Date.now())

        if (!Array.isArray(elements)) {
            elements = [elements]
        }

        elements.forEach(function (el, i) {
            if (typeof el === 'string') {
                elements[i] = document.getElementById(el)
                if (!elements[i]) {
                    throw new Error('The element id specified is not found.')
                }
            } else if (!el.tagName && !el.appendChild) {
                throw new Error('You must pass valid HTML elements, or ID of the element.')
            }
        })

        /* Default values to be overwritten by options object */
        var settings = {
            list: [],
            fontFamily: '"Trebuchet MS", "Heiti TC", "微軟正黑體", ' +
                '"Arial Unicode MS", "Droid Fallback Sans", sans-serif',
            fontWeight: 'normal',
            color: 'random-dark',
            minSize: 0, // 0 to disable
            weightFactor: 1,
            clearCanvas: true,
            backgroundColor: '#fff', // opaque white = rgba(255, 255, 255, 1)

            gridSize: 8,
            drawOutOfBound: false,
            shrinkToFit: false,
            origin: null,

            drawMask: false,
            maskColor: 'rgba(255,0,0,0.3)',
            maskGapWidth: 0.3,

            wait: 0,
            abortThreshold: 0, // disabled
            abort: function noop () {},

            minRotation: -Math.PI / 2,
            maxRotation: Math.PI / 2,
            rotationSteps: 0,

            shuffle: true,
            rotateRatio: 0.1,

            shape: 'circle',
            ellipticity: 0.65,

            classes: null,

            hover: null,
            click: null
        }

        if (options) {
            for (var key in options) {
                if (key in settings) {
                    settings[key] = options[key]
                }
            }
        }

        /* Convert weightFactor into a function */
        if (typeof settings.weightFactor !== 'function') {
            var factor = settings.weightFactor
            settings.weightFactor = function weightFactor (pt) {
                return pt * factor // in px
            }
        }

        /* Convert shape into a function */
        if (typeof settings.shape !== 'function') {
            switch (settings.shape) {
                case 'circle':
                /* falls through */
                default:
                    // 'circle' is the default and a shortcut in the code loop.
                    settings.shape = 'circle'
                    break

                case 'cardioid':
                    settings.shape = function shapeCardioid (theta) {
                        return 1 - Math.sin(theta)
                    }
                    break

                /*
                To work out an X-gon, one has to calculate "m",
                where 1/(cos(2*PI/X)+m*sin(2*PI/X)) = 1/(cos(0)+m*sin(0))
                http://www.wolframalpha.com/input/?i=1%2F%28cos%282*PI%2FX%29%2Bm*sin%28
                2*PI%2FX%29%29+%3D+1%2F%28cos%280%29%2Bm*sin%280%29%29
                Copy the solution into polar equation r = 1/(cos(t') + m*sin(t'))
                where t' equals to mod(t, 2PI/X)
               */

                case 'diamond':
                    // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+
                    // %28t%2C+PI%2F2%29%29%2Bsin%28mod+%28t%2C+PI%2F2%29%29%29%2C+t+%3D
                    // +0+..+2*PI
                    settings.shape = function shapeSquare (theta) {
                        var thetaPrime = theta % (2 * Math.PI / 4)
                        return 1 / (Math.cos(thetaPrime) + Math.sin(thetaPrime))
                    }
                    break

                case 'square':
                    // http://www.wolframalpha.com/input/?i=plot+r+%3D+min(1%2Fabs(cos(t
                    // )),1%2Fabs(sin(t)))),+t+%3D+0+..+2*PI
                    settings.shape = function shapeSquare (theta) {
                        return Math.min(
                            1 / Math.abs(Math.cos(theta)),
                            1 / Math.abs(Math.sin(theta))
                        )
                    }
                    break

                case 'triangle-forward':
                    // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+
                    // %28t%2C+2*PI%2F3%29%29%2Bsqrt%283%29sin%28mod+%28t%2C+2*PI%2F3%29
                    // %29%29%2C+t+%3D+0+..+2*PI
                    settings.shape = function shapeTriangle (theta) {
                        var thetaPrime = theta % (2 * Math.PI / 3)
                        return 1 / (Math.cos(thetaPrime) +
                            Math.sqrt(3) * Math.sin(thetaPrime))
                    }
                    break

                case 'triangle':
                case 'triangle-upright':
                    settings.shape = function shapeTriangle (theta) {
                        var thetaPrime = (theta + Math.PI * 3 / 2) % (2 * Math.PI / 3)
                        return 1 / (Math.cos(thetaPrime) +
                            Math.sqrt(3) * Math.sin(thetaPrime))
                    }
                    break

                case 'pentagon':
                    settings.shape = function shapePentagon (theta) {
                        var thetaPrime = (theta + 0.955) % (2 * Math.PI / 5)
                        return 1 / (Math.cos(thetaPrime) +
                            0.726543 * Math.sin(thetaPrime))
                    }
                    break

                case 'star':
                    settings.shape = function shapeStar (theta) {
                        var thetaPrime = (theta + 0.955) % (2 * Math.PI / 10)
                        if ((theta + 0.955) % (2 * Math.PI / 5) - (2 * Math.PI / 10) >= 0) {
                            return 1 / (Math.cos((2 * Math.PI / 10) - thetaPrime) +
                                3.07768 * Math.sin((2 * Math.PI / 10) - thetaPrime))
                        } else {
                            return 1 / (Math.cos(thetaPrime) +
                                3.07768 * Math.sin(thetaPrime))
                        }
                    }
                    break
            }
        }

        /* Make sure gridSize is a whole number and is not smaller than 4px */
        settings.gridSize = Math.max(Math.floor(settings.gridSize), 4)

        /* shorthand */
        var g = settings.gridSize
        var maskRectWidth = g - settings.maskGapWidth

        /* normalize rotation settings */
        var rotationRange = Math.abs(settings.maxRotation - settings.minRotation)
        var rotationSteps = Math.abs(Math.floor(settings.rotationSteps))
        var minRotation = Math.min(settings.maxRotation, settings.minRotation)

        /* information/object available to all functions, set when start() */
        var grid, // 2d array containing filling information
            ngx, ngy, // width and height of the grid
            center, // position of the center of the cloud
            maxRadius

        /* timestamp for measuring each putWord() action */
        var escapeTime

        /* function for getting the color of the text */
        var getTextColor
        function randomHslColor (min, max) {
            return 'hsl(' +
                (Math.random() * 360).toFixed() + ',' +
                (Math.random() * 30 + 70).toFixed() + '%,' +
                (Math.random() * (max - min) + min).toFixed() + '%)'
        }
        switch (settings.color) {
            case 'random-dark':
                getTextColor = function getRandomDarkColor () {
                    return randomHslColor(10, 50)
                }
                break

            case 'random-light':
                getTextColor = function getRandomLightColor () {
                    return randomHslColor(50, 90)
                }
                break

            default:
                if (typeof settings.color === 'function') {
                    getTextColor = settings.color
                }
                break
        }

        /* function for getting the font-weight of the text */
        var getTextFontWeight
        if (typeof settings.fontWeight === 'function') {
            getTextFontWeight = settings.fontWeight
        }

        /* function for getting the classes of the text */
        var getTextClasses = null
        if (typeof settings.classes === 'function') {
            getTextClasses = settings.classes
        }

        /* Interactive */
        var interactive = false
        var infoGrid = []
        var hovered

        var getInfoGridFromMouseTouchEvent =
            function getInfoGridFromMouseTouchEvent (evt) {
                var canvas = evt.currentTarget
                var rect = canvas.getBoundingClientRect()
                var clientX
                var clientY
                /** Detect if touches are available */
                if (evt.touches) {
                    clientX = evt.touches[0].clientX
                    clientY = evt.touches[0].clientY
                } else {
                    clientX = evt.clientX
                    clientY = evt.clientY
                }
                var eventX = clientX - rect.left
                var eventY = clientY - rect.top

                var x = Math.floor(eventX * ((canvas.width / rect.width) || 1) / g)
                var y = Math.floor(eventY * ((canvas.height / rect.height) || 1) / g)

                return infoGrid[x][y]
            }

        var wordcloudhover = function wordcloudhover (evt) {
            var info = getInfoGridFromMouseTouchEvent(evt)

            if (hovered === info) {
                return
            }

            hovered = info
            if (!info) {
                settings.hover(undefined, undefined, evt)

                return
            }

            settings.hover(info.item, info.dimension, evt)
        }

        var wordcloudclick = function wordcloudclick (evt) {
            var info = getInfoGridFromMouseTouchEvent(evt)
            if (!info) {
                return
            }

            settings.click(info.item, info.dimension, evt)
            evt.preventDefault()
        }

        /* Get points on the grid for a given radius away from the center */
        var pointsAtRadius = []
        var getPointsAtRadius = function getPointsAtRadius (radius) {
            if (pointsAtRadius[radius]) {
                return pointsAtRadius[radius]
            }

            // Look for these number of points on each radius
            var T = radius * 8

            // Getting all the points at this radius
            var t = T
            var points = []

            if (radius === 0) {
                points.push([center[0], center[1], 0])
            }

            while (t--) {
                // distort the radius to put the cloud in shape
                var rx = 1
                if (settings.shape !== 'circle') {
                    rx = settings.shape(t / T * 2 * Math.PI) // 0 to 1
                }

                // Push [x, y, t] t is used solely for getTextColor()
                points.push([
                    center[0] + radius * rx * Math.cos(-t / T * 2 * Math.PI),
                    center[1] + radius * rx * Math.sin(-t / T * 2 * Math.PI) *
                    settings.ellipticity,
                    t / T * 2 * Math.PI])
            }

            pointsAtRadius[radius] = points
            return points
        }

        /* Return true if we had spent too much time */
        var exceedTime = function exceedTime () {
            return ((settings.abortThreshold > 0) &&
                ((new Date()).getTime() - escapeTime > settings.abortThreshold))
        }

        /* Get the deg of rotation according to settings, and luck. */
        var getRotateDeg = function getRotateDeg () {
            if (settings.rotateRatio === 0) {
                return 0
            }

            if (Math.random() > settings.rotateRatio) {
                return 0
            }

            if (rotationRange === 0) {
                return minRotation
            }

            if (rotationSteps > 0) {
                // Min rotation + zero or more steps * span of one step
                return minRotation +
                    Math.floor(Math.random() * rotationSteps) *
                    rotationRange / (rotationSteps - 1)
            } else {
                return minRotation + Math.random() * rotationRange
            }
        }

        var getTextInfo = function getTextInfo (word, weight, rotateDeg, extraDataArray) {
            // calculate the acutal font size
            // fontSize === 0 means weightFactor function wants the text skipped,
            // and size < minSize means we cannot draw the text.
            var debug = false
            var fontSize = settings.weightFactor(weight)
            if (fontSize <= settings.minSize) {
                return false
            }

            // Scale factor here is to make sure fillText is not limited by
            // the minium font size set by browser.
            // It will always be 1 or 2n.
            var mu = 1
            if (fontSize < minFontSize) {
                mu = (function calculateScaleFactor () {
                    var mu = 2
                    while (mu * fontSize < minFontSize) {
                        mu += 2
                    }
                    return mu
                })()
            }

            // Get fontWeight that will be used to set fctx.font
            var fontWeight
            if (getTextFontWeight) {
                fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray)
            } else {
                fontWeight = settings.fontWeight
            }

            var fcanvas = document.createElement('canvas')
            var fctx = fcanvas.getContext('2d', { willReadFrequently: true })

            fctx.font = fontWeight + ' ' +
                (fontSize * mu).toString(10) + 'px ' + settings.fontFamily

            // Estimate the dimension of the text with measureText().
            var fw = fctx.measureText(word).width / mu
            var fh = Math.max(fontSize * mu,
                fctx.measureText('m').width,
                fctx.measureText('\uFF37').width
            ) / mu

            // Create a boundary box that is larger than our estimates,
            // so text don't get cut of (it sill might)
            var boxWidth = fw + fh * 2
            var boxHeight = fh * 3
            var fgw = Math.ceil(boxWidth / g)
            var fgh = Math.ceil(boxHeight / g)
            boxWidth = fgw * g
            boxHeight = fgh * g

            // Calculate the proper offsets to make the text centered at
            // the preferred position.

            // This is simply half of the width.
            var fillTextOffsetX = -fw / 2
            // Instead of moving the box to the exact middle of the preferred
            // position, for Y-offset we move 0.4 instead, so Latin alphabets look
            // vertical centered.
            var fillTextOffsetY = -fh * 0.4

            // Calculate the actual dimension of the canvas, considering the rotation.
            var cgh = Math.ceil((boxWidth * Math.abs(Math.sin(rotateDeg)) +
                boxHeight * Math.abs(Math.cos(rotateDeg))) / g)
            var cgw = Math.ceil((boxWidth * Math.abs(Math.cos(rotateDeg)) +
                boxHeight * Math.abs(Math.sin(rotateDeg))) / g)
            var width = cgw * g
            var height = cgh * g

            fcanvas.setAttribute('width', width)
            fcanvas.setAttribute('height', height)

            if (debug) {
                // Attach fcanvas to the DOM
                document.body.appendChild(fcanvas)
                // Save it's state so that we could restore and draw the grid correctly.
                fctx.save()
            }

            // Scale the canvas with |mu|.
            fctx.scale(1 / mu, 1 / mu)
            fctx.translate(width * mu / 2, height * mu / 2)
            fctx.rotate(-rotateDeg)

            // Once the width/height is set, ctx info will be reset.
            // Set it again here.
            fctx.font = fontWeight + ' ' +
                (fontSize * mu).toString(10) + 'px ' + settings.fontFamily

            // Fill the text into the fcanvas.
            // XXX: We cannot because textBaseline = 'top' here because
            // Firefox and Chrome uses different default line-height for canvas.
            // Please read https://bugzil.la/737852#c6.
            // Here, we use textBaseline = 'middle' and draw the text at exactly
            // 0.5 * fontSize lower.
            fctx.fillStyle = '#000'
            fctx.textBaseline = 'middle'
            fctx.fillText(
                word, fillTextOffsetX * mu,
                (fillTextOffsetY + fontSize * 0.5) * mu
            )

            // Get the pixels of the text
            var imageData = fctx.getImageData(0, 0, width, height).data

            if (exceedTime()) {
                return false
            }

            if (debug) {
                // Draw the box of the original estimation
                fctx.strokeRect(
                    fillTextOffsetX * mu,
                    fillTextOffsetY, fw * mu, fh * mu
                )
                fctx.restore()
            }

            // Read the pixels and save the information to the occupied array
            var occupied = []
            var gx = cgw
            var gy, x, y
            var bounds = [cgh / 2, cgw / 2, cgh / 2, cgw / 2]
            while (gx--) {
                gy = cgh
                while (gy--) {
                    y = g
                    /* eslint no-labels: ["error", { "allowLoop": true }] */
                    singleGridLoop: while (y--) {
                        x = g
                        while (x--) {
                            if (imageData[((gy * g + y) * width +
                                (gx * g + x)) * 4 + 3]) {
                                occupied.push([gx, gy])

                                if (gx < bounds[3]) {
                                    bounds[3] = gx
                                }
                                if (gx > bounds[1]) {
                                    bounds[1] = gx
                                }
                                if (gy < bounds[0]) {
                                    bounds[0] = gy
                                }
                                if (gy > bounds[2]) {
                                    bounds[2] = gy
                                }

                                if (debug) {
                                    fctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
                                    fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5)
                                }
                                break singleGridLoop
                            }
                        }
                    }
                    if (debug) {
                        fctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
                        fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5)
                    }
                }
            }

            if (debug) {
                fctx.fillStyle = 'rgba(0, 255, 0, 0.5)'
                fctx.fillRect(
                    bounds[3] * g,
                    bounds[0] * g,
                    (bounds[1] - bounds[3] + 1) * g,
                    (bounds[2] - bounds[0] + 1) * g
                )
            }

            // Return information needed to create the text on the real canvas
            return {
                mu: mu,
                occupied: occupied,
                bounds: bounds,
                gw: cgw,
                gh: cgh,
                fillTextOffsetX: fillTextOffsetX,
                fillTextOffsetY: fillTextOffsetY,
                fillTextWidth: fw,
                fillTextHeight: fh,
                fontSize: fontSize
            }
        }

        /* Determine if there is room available in the given dimension */
        var canFitText = function canFitText (gx, gy, gw, gh, occupied) {
            // Go through the occupied points,
            // return false if the space is not available.
            var i = occupied.length
            while (i--) {
                var px = gx + occupied[i][0]
                var py = gy + occupied[i][1]

                if (px >= ngx || py >= ngy || px < 0 || py < 0) {
                    if (!settings.drawOutOfBound) {
                        return false
                    }
                    continue
                }

                if (!grid[px][py]) {
                    return false
                }
            }
            return true
        }

        /* Actually draw the text on the grid */
        var drawText = function drawText (gx, gy, info, word, weight, distance, theta, rotateDeg, attributes, extraDataArray) {
            var fontSize = info.fontSize
            var color
            if (getTextColor) {
                color = getTextColor(word, weight, fontSize, distance, theta, extraDataArray)
            } else {
                color = settings.color
            }

            // get fontWeight that will be used to set ctx.font and font style rule
            var fontWeight
            if (getTextFontWeight) {
                fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray)
            } else {
                fontWeight = settings.fontWeight
            }

            var classes
            if (getTextClasses) {
                classes = getTextClasses(word, weight, fontSize, extraDataArray)
            } else {
                classes = settings.classes
            }

            elements.forEach(function (el) {
                if (el.getContext) {
                    var ctx = el.getContext('2d')
                    var mu = info.mu

                    // Save the current state before messing it
                    ctx.save()
                    ctx.scale(1 / mu, 1 / mu)

                    ctx.font = fontWeight + ' ' +
                        (fontSize * mu).toString(10) + 'px ' + settings.fontFamily
                    ctx.fillStyle = color

                    // Translate the canvas position to the origin coordinate of where
                    // the text should be put.
                    ctx.translate(
                        (gx + info.gw / 2) * g * mu,
                        (gy + info.gh / 2) * g * mu
                    )

                    if (rotateDeg !== 0) {
                        ctx.rotate(-rotateDeg)
                    }

                    // Finally, fill the text.

                    // XXX: We cannot because textBaseline = 'top' here because
                    // Firefox and Chrome uses different default line-height for canvas.
                    // Please read https://bugzil.la/737852#c6.
                    // Here, we use textBaseline = 'middle' and draw the text at exactly
                    // 0.5 * fontSize lower.
                    ctx.textBaseline = 'middle'
                    ctx.fillText(
                        word, info.fillTextOffsetX * mu,
                        (info.fillTextOffsetY + fontSize * 0.5) * mu
                    )

                    // The below box is always matches how <span>s are positioned
                    /* ctx.strokeRect(info.fillTextOffsetX, info.fillTextOffsetY,
                      info.fillTextWidth, info.fillTextHeight) */

                    // Restore the state.
                    ctx.restore()
                } else {
                    // drawText on DIV element
                    var span = document.createElement('span')
                    var transformRule = ''
                    transformRule = 'rotate(' + (-rotateDeg / Math.PI * 180) + 'deg) '
                    if (info.mu !== 1) {
                        transformRule +=
                            'translateX(-' + (info.fillTextWidth / 4) + 'px) ' +
                            'scale(' + (1 / info.mu) + ')'
                    }
                    var styleRules = {
                        position: 'absolute',
                        display: 'block',
                        font: fontWeight + ' ' +
                            (fontSize * info.mu) + 'px ' + settings.fontFamily,
                        left: ((gx + info.gw / 2) * g + info.fillTextOffsetX) + 'px',
                        top: ((gy + info.gh / 2) * g + info.fillTextOffsetY) + 'px',
                        width: info.fillTextWidth + 'px',
                        height: info.fillTextHeight + 'px',
                        lineHeight: fontSize + 'px',
                        whiteSpace: 'nowrap',
                        transform: transformRule,
                        webkitTransform: transformRule,
                        msTransform: transformRule,
                        transformOrigin: '50% 40%',
                        webkitTransformOrigin: '50% 40%',
                        msTransformOrigin: '50% 40%'
                    }
                    if (color) {
                        styleRules.color = color
                    }
                    span.textContent = word
                    for (var cssProp in styleRules) {
                        span.style[cssProp] = styleRules[cssProp]
                    }
                    if (attributes) {
                        for (var attribute in attributes) {
                            span.setAttribute(attribute, attributes[attribute])
                        }
                    }
                    if (classes) {
                        span.className += classes
                    }
                    el.appendChild(span)
                }
            })
        }

        /* Help function to updateGrid */
        var fillGridAt = function fillGridAt (x, y, drawMask, dimension, item) {
            if (x >= ngx || y >= ngy || x < 0 || y < 0) {
                return
            }

            grid[x][y] = false

            if (drawMask) {
                var ctx = elements[0].getContext('2d')
                ctx.fillRect(x * g, y * g, maskRectWidth, maskRectWidth)
            }

            if (interactive) {
                infoGrid[x][y] = { item: item, dimension: dimension }
            }
        }

        /* Update the filling information of the given space with occupied points.
           Draw the mask on the canvas if necessary. */
        var updateGrid = function updateGrid (gx, gy, gw, gh, info, item) {
            var occupied = info.occupied
            var drawMask = settings.drawMask
            var ctx
            if (drawMask) {
                ctx = elements[0].getContext('2d')
                ctx.save()
                ctx.fillStyle = settings.maskColor
            }

            var dimension
            if (interactive) {
                var bounds = info.bounds
                dimension = {
                    x: (gx + bounds[3]) * g,
                    y: (gy + bounds[0]) * g,
                    w: (bounds[1] - bounds[3] + 1) * g,
                    h: (bounds[2] - bounds[0] + 1) * g
                }
            }

            var i = occupied.length
            while (i--) {
                var px = gx + occupied[i][0]
                var py = gy + occupied[i][1]

                if (px >= ngx || py >= ngy || px < 0 || py < 0) {
                    continue
                }

                fillGridAt(px, py, drawMask, dimension, item)
            }

            if (drawMask) {
                ctx.restore()
            }
        }

        /* putWord() processes each item on the list,
           calculate it's size and determine it's position, and actually
           put it on the canvas. */
        var putWord = function putWord (item) {
            var word, weight, attributes
            if (Array.isArray(item)) {
                word = item[0]
                weight = item[1]
            } else {
                word = item.word
                weight = item.weight
                attributes = item.attributes
            }
            var rotateDeg = getRotateDeg()

            var extraDataArray = getItemExtraData(item)

            // get info needed to put the text onto the canvas
            var info = getTextInfo(word, weight, rotateDeg, extraDataArray)

            // not getting the info means we shouldn't be drawing this one.
            if (!info) {
                return false
            }

            if (exceedTime()) {
                return false
            }

            // If drawOutOfBound is set to false,
            // skip the loop if we have already know the bounding box of
            // word is larger than the canvas.
            if (!settings.drawOutOfBound && !settings.shrinkToFit) {
                var bounds = info.bounds;
                if ((bounds[1] - bounds[3] + 1) > ngx ||
                    (bounds[2] - bounds[0] + 1) > ngy) {
                    return false
                }
            }

            // Determine the position to put the text by
            // start looking for the nearest points
            var r = maxRadius + 1

            var tryToPutWordAtPoint = function (gxy) {
                var gx = Math.floor(gxy[0] - info.gw / 2)
                var gy = Math.floor(gxy[1] - info.gh / 2)
                var gw = info.gw
                var gh = info.gh

                // If we cannot fit the text at this position, return false
                // and go to the next position.
                if (!canFitText(gx, gy, gw, gh, info.occupied)) {
                    return false
                }

                // Actually put the text on the canvas
                drawText(gx, gy, info, word, weight,
                    (maxRadius - r), gxy[2], rotateDeg, attributes, extraDataArray)

                // Mark the spaces on the grid as filled
                updateGrid(gx, gy, gw, gh, info, item)

                // Return true so some() will stop and also return true.
                return true
            }

            while (r--) {
                var points = getPointsAtRadius(maxRadius - r)

                if (settings.shuffle) {
                    points = [].concat(points)
                    shuffleArray(points)
                }

                // Try to fit the words by looking at each point.
                // array.some() will stop and return true
                // when putWordAtPoint() returns true.
                // If all the points returns false, array.some() returns false.
                var drawn = points.some(tryToPutWordAtPoint)

                if (drawn) {
                    // leave putWord() and return true
                    return true
                }
            }
            if (settings.shrinkToFit) {
                if (Array.isArray(item)) {
                    item[1] = item[1] * 3 / 4
                } else {
                    item.weight = item.weight * 3 / 4
                }
                return putWord(item)
            }
            // we tried all distances but text won't fit, return false
            return false
        }

        /* Send DOM event to all elements. Will stop sending event and return
           if the previous one is canceled (for cancelable events). */
        var sendEvent = function sendEvent (type, cancelable, details) {
            if (cancelable) {
                return !elements.some(function (el) {
                    var event = new CustomEvent(type, {
                        detail: details || {}
                    })
                    return !el.dispatchEvent(event)
                }, this)
            } else {
                elements.forEach(function (el) {
                    var event = new CustomEvent(type, {
                        detail: details || {}
                    })
                    el.dispatchEvent(event)
                }, this)
            }
        }

        /* Start drawing on a canvas */
        var start = function start () {
            // For dimensions, clearCanvas etc.,
            // we only care about the first element.
            var canvas = elements[0]

            if (canvas.getContext) {
                ngx = Math.ceil(canvas.width / g)
                ngy = Math.ceil(canvas.height / g)
            } else {
                var rect = canvas.getBoundingClientRect()
                ngx = Math.ceil(rect.width / g)
                ngy = Math.ceil(rect.height / g)
            }

            // Sending a wordcloudstart event which cause the previous loop to stop.
            // Do nothing if the event is canceled.
            if (!sendEvent('wordcloudstart', true)) {
                return
            }

            // Determine the center of the word cloud
            center = (settings.origin)
                ? [settings.origin[0] / g, settings.origin[1] / g]
                : [ngx / 2, ngy / 2]

            // Maxium radius to look for space
            maxRadius = Math.floor(Math.sqrt(ngx * ngx + ngy * ngy))

            /* Clear the canvas only if the clearCanvas is set,
               if not, update the grid to the current canvas state */
            grid = []

            var gx, gy, i
            if (!canvas.getContext || settings.clearCanvas) {
                elements.forEach(function (el) {
                    if (el.getContext) {
                        var ctx = el.getContext('2d')
                        ctx.fillStyle = settings.backgroundColor
                        ctx.clearRect(0, 0, ngx * (g + 1), ngy * (g + 1))
                        ctx.fillRect(0, 0, ngx * (g + 1), ngy * (g + 1))
                    } else {
                        el.textContent = ''
                        el.style.backgroundColor = settings.backgroundColor
                        el.style.position = 'relative'
                    }
                })

                /* fill the grid with empty state */
                gx = ngx
                while (gx--) {
                    grid[gx] = []
                    gy = ngy
                    while (gy--) {
                        grid[gx][gy] = true
                    }
                }
            } else {
                /* Determine bgPixel by creating
                   another canvas and fill the specified background color. */
                var bctx = document.createElement('canvas').getContext('2d')

                bctx.fillStyle = settings.backgroundColor
                bctx.fillRect(0, 0, 1, 1)
                var bgPixel = bctx.getImageData(0, 0, 1, 1).data

                /* Read back the pixels of the canvas we got to tell which part of the
                   canvas is empty.
                   (no clearCanvas only works with a canvas, not divs) */
                var imageData =
                    canvas.getContext('2d').getImageData(0, 0, ngx * g, ngy * g).data

                gx = ngx
                var x, y
                while (gx--) {
                    grid[gx] = []
                    gy = ngy
                    while (gy--) {
                        y = g
                        /* eslint no-labels: ["error", { "allowLoop": true }] */
                        singleGridLoop: while (y--) {
                            x = g
                            while (x--) {
                                i = 4
                                while (i--) {
                                    if (imageData[((gy * g + y) * ngx * g +
                                        (gx * g + x)) * 4 + i] !== bgPixel[i]) {
                                        grid[gx][gy] = false
                                        break singleGridLoop
                                    }
                                }
                            }
                        }
                        if (grid[gx][gy] !== false) {
                            grid[gx][gy] = true
                        }
                    }
                }

                imageData = bctx = bgPixel = undefined
            }

            // fill the infoGrid with empty state if we need it
            if (settings.hover || settings.click) {
                interactive = true

                /* fill the grid with empty state */
                gx = ngx + 1
                while (gx--) {
                    infoGrid[gx] = []
                }

                if (settings.hover) {
                    canvas.addEventListener('mousemove', wordcloudhover)
                }

                if (settings.click) {
                    canvas.addEventListener('click', wordcloudclick)
                    canvas.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)'
                }

                canvas.addEventListener('wordcloudstart', function stopInteraction () {
                    canvas.removeEventListener('wordcloudstart', stopInteraction)
                    canvas.removeEventListener('mousemove', wordcloudhover)
                    canvas.removeEventListener('click', wordcloudclick)
                    hovered = undefined
                })
            }

            i = 0
            var loopingFunction, stoppingFunction
            if (settings.wait !== 0) {
                loopingFunction = window.setTimeout
                stoppingFunction = window.clearTimeout
            } else {
                loopingFunction = window.setImmediate
                stoppingFunction = window.clearImmediate
            }

            var addEventListener = function addEventListener (type, listener) {
                elements.forEach(function (el) {
                    el.addEventListener(type, listener)
                }, this)
            }

            var removeEventListener = function removeEventListener (type, listener) {
                elements.forEach(function (el) {
                    el.removeEventListener(type, listener)
                }, this)
            }

            var anotherWordCloudStart = function anotherWordCloudStart () {
                removeEventListener('wordcloudstart', anotherWordCloudStart)
                stoppingFunction(timer[timerId])
            }

            addEventListener('wordcloudstart', anotherWordCloudStart)
            timer[timerId] = loopingFunction(function loop () {
                if (i >= settings.list.length) {
                    stoppingFunction(timer[timerId])
                    sendEvent('wordcloudstop', false)
                    removeEventListener('wordcloudstart', anotherWordCloudStart)
                    delete timer[timerId];
                    return
                }
                escapeTime = (new Date()).getTime()
                var drawn = putWord(settings.list[i])
                var canceled = !sendEvent('wordclouddrawn', true, {
                    item: settings.list[i],
                    drawn: drawn
                })
                if (exceedTime() || canceled) {
                    stoppingFunction(timer[timerId])
                    settings.abort()
                    sendEvent('wordcloudabort', false)
                    sendEvent('wordcloudstop', false)
                    removeEventListener('wordcloudstart', anotherWordCloudStart)
                    delete timer[timerId]
                    return
                }
                i++
                timer[timerId] = loopingFunction(loop, settings.wait)
            }, settings.wait)
        }

        // All set, start the drawing
        start()
    }

    WordCloud.isSupported = isSupported
    WordCloud.minFontSize = minFontSize
    WordCloud.stop = function stop () {
        if (timer) {
            for (var timerId in timer) {
                window.clearImmediate(timer[timerId])
            }
        }
    }

    // Expose the library as an AMD module
    if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef
        global.WordCloud = WordCloud
        define('wordcloud', [], function () { return WordCloud }) // eslint-disable-line no-undef
    } else if (typeof module !== 'undefined' && module.exports) { // eslint-disable-line no-undef
        module.exports = WordCloud // eslint-disable-line no-undef
    } else {
        global.WordCloud = WordCloud
    }
})(this) // jshint ignore:line